<script>
import { onMounted, onBeforeUnmount, reactive, toRefs, ref } from "vue";

import * as echarts from "echarts";
export default {
  props: {
    labelList: { type: Array, default: [] }, //标签列表
    dataList: { type: Array, default: [] }, //数据列表
    dataListm: { type: Array, default: [] }, //数据列表
    dataListq: { type: Array, default: [] }, //数据列表
    dataListy: { type: Array, default: [] }, //数据列表

  },
  setup(props) {
    const state = reactive({});

    const echartContainer = ref();
    let myChart = null;

    const resizeHandler = () => {
      myChart.resize();
    };

    //防抖
    const debounce = (func, wait) => {
      let timeout;
      return function () {
        const context = this;
        const args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    };

    const cancalDebounce = debounce(resizeHandler, 500);

    const initChart = () => {
      myChart = echarts.init(echartContainer.value);

      window.addEventListener("resize", cancalDebounce);

      let option = {
        title:{
          text: "按季度各个出口客流统计",
          top:"1%",
          textStyle:{
              fontSize:12,
 
          },
        },
        tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
        xAxis: {
          type: "value",
         
        },
        yAxis: {
          type: "category",
          data: props.labelList,
        },
        series: [
    {
      name: '1-3',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
          props.dataListq[0],
          props.dataListq[1],
          props.dataListq[2],
          props.dataListq[3],
          props.dataListq[4],   
        ]
    },
    {
      name: '4-6',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [props.dataListq[5],
          props.dataListq[6],
          props.dataListq[7],
          props.dataListq[8],
          props.dataListq[9],  ]
    },
    {
      name: '7-9',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataListq[10],
          props.dataListq[11],
          props.dataListq[12],
          props.dataListq[13],
          props.dataListq[14],  
      ]
    },
    {
      name: '10-12',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [props.dataListq[15],
          props.dataListq[16],
          props.dataListq[17],
          props.dataListq[18],
          props.dataListq[19],  ]
    },
    
  ]

      };

      myChart.setOption(option);
    };

    onMounted(() => {
      initChart();
    });

    onBeforeUnmount(() => {
      window.removeEventListener("resize", cancalDebounce);
      myChart.dispose();
    });

    return { ...toRefs(state), echartContainer };
  },
};
</script>

<template>
  <el-card shadow="never" style="width: 100%; height: 100%">
    <template #header> {{ title }}</template>
    <div ref="echartContainer" style="width: 100%; height: 100%"></div>
  </el-card>
</template>
<style scoped>
</style>